<template>
  <div class="common-settings">
    <div class="settings-header">
      <h2>通用设置</h2>
      <p>个性化您的使用体验和界面偏好</p>
    </div>
    
    <div class="settings-content">
      <div class="form-section">
        <h3>界面设置</h3>
        <div class="setting-item">
          <div class="setting-info">
            <label>主题模式</label>
            <p>选择您喜欢的界面主题</p>
          </div>
          <div class="theme-options">
            <div class="theme-option" :class="{ active: settings.theme === 'light' }" @click="setTheme('light')">
              <div class="theme-preview light-theme">
                <div class="preview-header"></div>
                <div class="preview-content"></div>
              </div>
              <span>浅色模式</span>
            </div>
            <div class="theme-option" :class="{ active: settings.theme === 'dark' }" @click="setTheme('dark')">
              <div class="theme-preview dark-theme">
                <div class="preview-header"></div>
                <div class="preview-content"></div>
              </div>
              <span>深色模式</span>
            </div>
            <div class="theme-option" :class="{ active: settings.theme === 'auto' }" @click="setTheme('auto')">
              <div class="theme-preview auto-theme">
                <div class="preview-header"></div>
                <div class="preview-content"></div>
              </div>
              <span>跟随系统</span>
            </div>
          </div>
        </div>
        
        <div class="setting-item">
          <div class="setting-info">
            <label>语言设置</label>
            <p>选择界面显示语言</p>
          </div>
          <select v-model="settings.language" @change="changeLanguage">
            <option value="zh-CN">简体中文</option>
            <option value="zh-TW">繁體中文</option>
            <option value="en-US">English</option>
            <option value="ja-JP">日本語</option>
          </select>
        </div>
        
        <div class="setting-item">
          <div class="setting-info">
            <label>字体大小</label>
            <p>调整界面文字大小</p>
          </div>
          <div class="font-size-control">
            <input type="range" v-model="settings.fontSize" min="12" max="18" step="1" @input="changeFontSize" />
            <span>{{ settings.fontSize }}px</span>
          </div>
        </div>
      </div>
      
      <div class="form-section">
        <h3>功能设置</h3>
        <div class="setting-item">
          <div class="setting-info">
            <label>关闭计划助手</label>
            <p>关闭后将不再显示学习计划相关提醒</p>
          </div>
          <label class="switch">
            <input type="checkbox" v-model="settings.disablePlanHelper" @change="togglePlanHelper" />
            <span class="slider"></span>
          </label>
        </div>
        
        <div class="setting-item">
          <div class="setting-info">
            <label>自动播放视频</label>
            <p>进入课程页面时自动播放视频</p>
          </div>
          <label class="switch">
            <input type="checkbox" v-model="settings.autoPlayVideo" @change="toggleAutoPlay" />
            <span class="slider"></span>
          </label>
        </div>
        
        <div class="setting-item">
          <div class="setting-info">
            <label>显示学习进度</label>
            <p>在课程列表中显示学习进度条</p>
          </div>
          <label class="switch">
            <input type="checkbox" v-model="settings.showProgress" @change="toggleProgress" />
            <span class="slider"></span>
          </label>
        </div>
      </div>
      
      <div class="form-section">
        <h3>隐私设置</h3>
        <div class="setting-item">
          <div class="setting-info">
            <label>公开学习记录</label>
            <p>允许其他用户查看您的学习记录</p>
          </div>
          <label class="switch">
            <input type="checkbox" v-model="settings.publicLearningRecord" @change="togglePublicRecord" />
            <span class="slider"></span>
          </label>
        </div>
        
        <div class="setting-item">
          <div class="setting-info">
            <label>允许搜索</label>
            <p>允许其他用户通过用户名搜索到您</p>
          </div>
          <label class="switch">
            <input type="checkbox" v-model="settings.allowSearch" @change="toggleAllowSearch" />
            <span class="slider"></span>
          </label>
        </div>
      </div>
      
      <div class="form-actions">
        <button class="btn-primary" @click="saveSettings">保存设置</button>
        <button class="btn-secondary" @click="resetSettings">恢复默认</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommonSettings',
  data() {
    return {
      settings: {
        theme: 'light',
        language: 'zh-CN',
        fontSize: 14,
        disablePlanHelper: false,
        autoPlayVideo: true,
        showProgress: true,
        publicLearningRecord: false,
        allowSearch: true
      },
      defaultSettings: {}
    }
  },
  mounted() {
    this.loadSettings();
  },
  methods: {
    loadSettings() {
      // 从本地存储加载设置
      const savedSettings = localStorage.getItem('userSettings');
      if (savedSettings) {
        this.settings = { ...this.settings, ...JSON.parse(savedSettings) };
      }
      this.defaultSettings = { ...this.settings };
    },
    setTheme(theme) {
      this.settings.theme = theme;
      this.applyTheme(theme);
    },
    applyTheme(theme) {
      // 应用主题
      document.documentElement.setAttribute('data-theme', theme);
      console.log('应用主题:', theme);
    },
    changeLanguage() {
      console.log('切换语言:', this.settings.language);
      this.$message?.success('语言设置已更新');
    },
    changeFontSize() {
      document.documentElement.style.fontSize = this.settings.fontSize + 'px';
      console.log('字体大小:', this.settings.fontSize);
    },
    togglePlanHelper() {
      console.log('计划助手:', this.settings.disablePlanHelper ? '关闭' : '开启');
    },
    toggleAutoPlay() {
      console.log('自动播放:', this.settings.autoPlayVideo ? '开启' : '关闭');
    },
    toggleProgress() {
      console.log('显示进度:', this.settings.showProgress ? '开启' : '关闭');
    },
    togglePublicRecord() {
      console.log('公开学习记录:', this.settings.publicLearningRecord ? '开启' : '关闭');
    },
    toggleAllowSearch() {
      console.log('允许搜索:', this.settings.allowSearch ? '开启' : '关闭');
    },
    saveSettings() {
      localStorage.setItem('userSettings', JSON.stringify(this.settings));
      console.log('保存设置:', this.settings);
      this.$message?.success('设置保存成功');
    },
    resetSettings() {
      this.settings = { ...this.defaultSettings };
      localStorage.removeItem('userSettings');
      this.applyTheme(this.settings.theme);
      this.changeFontSize();
      this.$message?.info('已恢复默认设置');
    }
  }
}
</script>

<style scoped>
.common-settings {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.settings-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}

.settings-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #333;
}

.settings-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.form-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

.form-section h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #333;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #e5e5e5;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-info {
  flex: 1;
}

.setting-info label {
  display: block;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.setting-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.theme-options {
  display: flex;
  gap: 12px;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 2px solid #e5e5e5;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.3s;
}

.theme-option.active {
  border-color: #007bff;
}

.theme-preview {
  width: 60px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.light-theme {
  background: #fff;
}

.light-theme .preview-header {
  height: 12px;
  background: #f8f9fa;
  border-bottom: 1px solid #e5e5e5;
}

.light-theme .preview-content {
  height: 27px;
  background: #fff;
}

.dark-theme {
  background: #2d3748;
}

.dark-theme .preview-header {
  height: 12px;
  background: #1a202c;
  border-bottom: 1px solid #4a5568;
}

.dark-theme .preview-content {
  height: 27px;
  background: #2d3748;
}

.auto-theme {
  background: linear-gradient(90deg, #fff 50%, #2d3748 50%);
}

.auto-theme .preview-header {
  height: 12px;
  background: linear-gradient(90deg, #f8f9fa 50%, #1a202c 50%);
}

.auto-theme .preview-content {
  height: 27px;
  background: linear-gradient(90deg, #fff 50%, #2d3748 50%);
}

.theme-option span {
  font-size: 12px;
  color: #666;
}

select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  min-width: 120px;
}

.font-size-control {
  display: flex;
  align-items: center;
  gap: 12px;
}

.font-size-control input[type="range"] {
  width: 120px;
}

.font-size-control span {
  min-width: 40px;
  font-size: 14px;
  color: #666;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #007bff;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.form-actions {
  display: flex;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
}

.btn-primary,
.btn-secondary {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background-color: #545b62;
}
</style>